<template>
  <div>
    <div class="temp-container">
      <el-form ref="myForm" :model="formData" :rules="rules" class="demo-ruleForm">
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="cellphone">
          <el-input v-model="formData.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="信用卡号" prop="cardNum">
          <el-input v-model="formData.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="增加额度" prop="increase">
          <el-input v-model="formData.increase"></el-input>
        </el-form-item>
        <el-form-item class="view-center">
          <el-button type="primary" @click="submitForm" :loading="loading" style="width: 48%;">
            {{ loading ? '提交中 ...' : '提 交' }}
          </el-button>
          <el-button @click="close" style="width: 48%;">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import {
    validateCellphone,
    isEmpty
  } from '@/utils/validate'
  import {
    creditCardAddLife
  } from '@/api/temp.js'

  export default {
    data() {
      const validCellphone = (rule, value, callback) => {
        if (isEmpty(value) || !validateCellphone(value)) {
          callback(new Error('请输入正确的手机号吗'))
        } else {
          callback()
        }
      }
      const validCard = (rule, value, callback) => {
        if (isEmpty(value) || value.length != 18) {
          callback(new Error('请输入18位身份证号码'))
        } else {
          callback()
        }
      }
      return {
        loading: false,

        formData: {
          name: undefined,
          card: undefined,
          cardNum: undefined,
          increase: undefined,
          cellphone: undefined
        },
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          cellphone: [{
            required: true,
            trigger: 'blur',
            validator: validCellphone
          }],
          card: [{
            required: true,
            trigger: 'blur',
            validator: validCard
          }],
          cardNum: [{
            required: true,
            message: '请输入信用卡号',
            trigger: 'blur'
          }],
          increase: [{
            required: true,
            message: '请输入增加额度',
            trigger: 'blur'
          }]

        },
        token: undefined,
        secretKey: undefined,
        source: undefined,
      };
    },
    mounted() {
      this.getUrlParamToken();
    },
    methods: {
      close() {
        window.opener = null;
        window.open("about:blank", "_top").close();
        //调用微信内部的关闭页面方法
        WeixinJSBridge.call('closeWindow');
      },
      resetForm() {
        this.$refs.myForm.resetFields();
      },
      getUrlParamToken() {
        this.token = this.$utils.getUrlParam('token');
        this.secretKey = this.$utils.getUrlParam('secretKey');
        this.source = this.$utils.getUrlParam('source');
      },
      submitForm() {
        this.$refs.myForm.validate(async (valid) => {
          if (!valid) return false;
          this.loading = true;
          try {
            var params = {
              content: JSON.stringify(this.formData),
              secretKey: this.secretKey,
              source: this.source,
              token: this.token
            };
            var res = await creditCardAddLife(params);
            this.$utils.showSuccessMessage(res.msg, this.close);
          } finally {
            this.loading = false;
          }
        });
      }

    }
  }
</script>
<style scoped lang="scss">
  .temp-container {
    padding: 20px;
  }

  /deep/.view-center {
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    margin-top: 30%;
    margin-bottom: 0;
  }
</style>
